<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<style>body{padding:20px;}</style>
	</head>
	<body>
		<form class="layui-form layui-form-pane" action="">
			<div class="layui-form-item"></div>
			<div class="layui-form-item test"></div>
			<div class="layui-form-item test1" lay-filter="test1"></div>
			<div class="layui-form-item test2"></div>
			<div class="layui-form-item test3"></div>
		</form>
		
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript">
			layui.config({
				base: 'js/',
			})
			layui.use(['interact'],function(){
				var interact = layui.interact;
				var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
				interact.render({
					elem : '.test',
					title : '选择联动',
					data : data,
					name : 'region',
				});
				interact.render({
					elem : '.test1',
					title : '选择省市区',
					data : data,
					name : 'region1',
					hint : ['请选择省份','请选择城市','请选择县/区'],
				});
				interact.render({
					elem : '.test2',
					title : '选择联动',
					data : data,
					name : 'region2',
					hint : ['第一级','第二级','第三级'],
				});
				interact.render({
					elem : '.test3',
					title : '选择联动',
					data : data,
					name : 'region3',
					selected : [1,4,11],
					hint : ['第一级','第二级','第三级'],
				});
				interact.on('interact(test1)',function(data){
					console.dir(data);
				})
			})
		</script>
	</body>
</html>
